<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="../css/mui.css" rel="stylesheet"/>
    <link href="../css/header.css" rel="stylesheet"/>
</head>

<body>
<!--头部标题栏 -->
<header class="mui-bar mui-bar-nav title">
    <h1 class="mui-title title-color">个人信息</h1>
</header>
<!-- 主体部分 -->
<div class="mui-content">
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;" id="link_myface">
                <span class="mui-icon mui-icon-arrowright  mui-pull-right"
                      style="line-height: 42px;color:dimgray;margin-left: 3px;"></span>
                <img id="img_my_face" class="mui-media-object mui-pull-right" src="../images/head.jpg" style="line-height: 42px;">
                <div class="mui-media-body font-style">
                    头像
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a id="link_nickname" href="javascript:;">
                <span class="mui-icon mui-icon-arrowright  mui-pull-right"
                      style="line-height: 42px;color:dimgray;margin-left: 3px;"></span>
                <span id="span_nickname" class="mui-pull-right"
                      style="line-height:42px;color:dimgray;font-size:16px;"></span>
                <div class="mui-media-body font-style">
                    昵称
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <span id="span_username" class="mui-pull-right" style="color:dimgray;font-size:16px;"></span>
                <div class="mui-media-body font-style">
                    账号
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a id="link_my_qrcode" href="javascript:;">
                <span class="mui-icon mui-icon-arrowright  mui-pull-right"
                      style="line-height: 42px;color:dimgray;margin-left: 3px;"></span>
                <img class="mui-media-object mui-pull-right" src="../images/qrcode.png"
                     style="max-width: 38px;height: 38px;">
                <div class="mui-media-body font-style">
                    二维码
                </div>
            </a>
        </li>
    </ul>
    <br/>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a id="link_logout" href="javascript:;">
                <div class="mui-media-body font-style" style="text-align: center;">
                    退出登录
                </div>
            </a>
        </li>
    </ul>
</div>


<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript">
    mui.init();
    mui.plusReady(function () {
		
        //获取当前webview对象，并且刷新当前登录的用户信息
        var currentWebview = plus.webview.currentWebview();
        currentWebview.addEventListener("show", function () {
            //刷新当前用户信息
            refreshUserInfo();
        });
        //添加自定义事件，刷新头像及个人信息
        window.addEventListener("refresh", function () {
            refreshUserInfo();
        });

        //头像
        document.getElementById("link_myface").addEventListener("tap", function () {
            mui.openWindow("myface.html", "myface.html");
        });


        //昵称
        document.getElementById("link_nickname").addEventListener("tap", function () {
            mui.openWindow("mynickname.html", "mynickname.html");
        });
        //二维码
        document.getElementById("link_my_qrcode").addEventListener("tap", function () {
            mui.openWindow("myQRCode.html", "myQRCode.html");
        });

        //退出登录
        var link_logout = document.getElementById("link_logout");
        link_logout.addEventListener("tap", function () {
            app.userLogout();
            mui.openWindow("login.html", "login.html");
        });
		
    });

    //刷新登录用户信息的函数
    function refreshUserInfo() {
        var user = app.getUserGlobalInfo();
        var faceImage = user.faceImage;
        var nickname = user.nickname;
        var username = user.username;

        var span_nickname = document.getElementById("span_nickname");
        var span_username = document.getElementById("span_username");
        //动态将个人信息展示到对应的容器中
        span_nickname.innerHTML = nickname;
        span_username.innerHTML = username;
        if (app.isNotNull(faceImage)) {
            var img_my_face = document.getElementById("img_my_face");
            img_my_face.src = app.imgServerUrl + faceImage;
            console.log(app.imgServerUrl + faceImage);
        }
    }
</script>
</body>

</html>
